<script setup lang="ts">
import { ref } from "vue"

const tabList = ref<any>([
    {
        key: '1',
        title: '全部',
    },
    {
        key: '2',
        title: '早教',
    },
    {
        key: '3',
        title: '托育',
    },
    {
        key: '4',
        title: '游泳水育',
    },
    {
        key: '5',
        title: '幼小衔接',
    },
    {
        key: '6',
        title: '英语',
    },
    {
        key: '7',
        title: '乐高编程',
    },
    {
        key: '8',
        title: '美术',
    },
    {
        key: '9',
        title: '书法',
    },
    {
        key: '10',
        title: '体能',
    },
    {
        key: '11',
        title: '感统',
    },
    {
        key: '12',
        title: '篮球',
    },
    {
        key: '13',
        title: '羽毛球',
    },
])
</script>

<template>
    <umrp-container padding="16px" direction="vertical">
        <umrp-input-search></umrp-input-search>
    </umrp-container>
    <umrp-row>
        <umrp-col :span="6">
            <umrp-tabs :items="tabList" direction="vertical" bg-color="#f2f2f2" style="height: 100vh;"></umrp-tabs>
        </umrp-col>
        <umrp-col :span="18">
            <umrp-container direction="vertical" :gap="16" padding="0 16px">
                <umrp-media v-for="_ in 5">
                    <umrp-space direction="vertical" :size="6">
                        <umrp-text bold>中国舞青少儿(3.5-16岁)</umrp-text>
                        <umrp-text>市场价：￥199</umrp-text>
                        <umrp-text>已售:6</umrp-text>
                        <umrp-text>机构:苗苗舞蹈园</umrp-text>
                        <umrp-text>离家380.1km</umrp-text>
                    </umrp-space>
                </umrp-media>
            </umrp-container>
        </umrp-col>
    </umrp-row>
    <umrp-action-bar>
        <umrp-row>
            <umrp-col :span="10">
                <umrp-container :height="50" justify="center" align="center">
                    <umrp-text>还可选 4 门课</umrp-text>
                </umrp-container>
            </umrp-col>
            <umrp-col :span="14" v-route="'XiaolanlkOrderConfirm'">
                <umrp-container :height="50" justify="center" align="center" bg-color="primary">
                    <umrp-text color="#fff">下一步</umrp-text>
                </umrp-container>
            </umrp-col>
        </umrp-row>
    </umrp-action-bar>
</template>